<template>
  <div id="app">
    <div class="mask"
         v-show='showSideBar' 
         @click='hideSideBar'>
    </div>

    <side-bar 
         v-show='showSideBar'
         transition='sidebar'
         >
    </side-bar>

    <top-bar></top-bar>
    <!-- <list></list> -->
    <router-view transition='sidebar'></router-view>


  </div>
</template>

<script>
import Tabbar from 'vux-com/tabbar/tabbar'
import TabbarItem from 'vux-com/tabbar/tabbar-item'
import TopBar from './components/TopBar'
import SideBar from './components/SideBar'

import store from './vuex/store'

export default {
  components: {
    TopBar,
    SideBar
  },
  data(){
    return{
        showSideBar:false,
    }
  },
  methods:{
    hideSideBar:function(){
      this.showSideBar=false;
      document.body.style.overflow='auto';
    }
    
  },
  events:{
    showSideBar:function(){
      this.showSideBar=true;
      this.$broadcast('resetScroller');
      document.body.style.overflow='hidden';
    },
    hideSideBar:function(){
      this.showSideBar=false;
      document.body.style.overflow='auto';
    }
  },
  store:store
}
</script>

<style>
@import '~vux/dist/vux.css';


.mask{
  width: 100%;
  height: 100%;
  position: fixed;

  background: rgba(0,0,0,0.4);
  z-index: 2;
}
.ov{
  overflow: hidden;
}
    .sidebar-transition {
      transition: all .4s ease;
      overflow: hidden;
      left:0px;
      opacity: 1;
    }

    /* .expand-enter 定义进入的开始状态 */
    /* .expand-leave 定义离开的结束状态 */
    .sidebar-enter, .sidebar-leave {
      transform: translateX(-200px);
      opacity: 0;

    }

</style>
